<!-- 修改放箱公司 -->
<template>
  <div>
    <el-dialog
      width="900px"
      top="6vh"
      class="edit-ship-generation"
      title="修改放箱公司"
      :visible="$store.state.dialog.edutShipgeneration"
      @close="close">
      <el-row>
        <el-col :span="24">
          <el-card shadow="hover">
            <el-form :model="editForm" :rules="rules" ref="editForm" label-width="100px" size="mini">
              <el-row>
                <el-form-item label="船代" prop="shipAgencyId">
                  <el-select v-model="editForm.shipAgencyId" filterable placeholder="请选择船代">
                    <el-option v-for="(item, index) in boatList" :key="index" :label="item.text" :value="item.shipAgencyId"></el-option>
                  </el-select>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="提单号首字符">
                  <el-input v-model="editForm.match "></el-input>
                </el-form-item>
              </el-row>
              <el-row>
                <div class="tishi">
                  <p>多个提单号请用“ , ”隔开</p>
                </div>
              </el-row>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editform('editForm')" size="mini">确 定</el-button>
        <el-button type="info" @click="close" size="mini">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { setBoatAgentMatch } from '../api/customerManagement'
export default {
  data () {
    return {
      editForm: {},
      rules: {
        boatAgentId: [
          { required: true, message: '请选择船代', trigger: 'blur' }
        ]
      }
    }
  },
  props: {
    boatList: {
      type: Array,
      default: () => {
        return []
      }
    },
    edit: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  watch: {
    '$store.state.dialog.edutShipgeneration' (value) {
      if (value) {
        this.editForm = JSON.parse(this.edit)
      }
    }
  },
  methods: {
    close () {
      this.$store.commit('hide_edit_ship_generation_dialog')
    },
    // 新增放箱公司
    async editShipgeneration () {
      const res = await setBoatAgentMatch({
        boatAgentId: this.editForm.shipAgencyId, // 客户编号
        match: this.editForm.match
      })
      if (res.status === 200) {
        this.$notify({
          title: '提示',
          message: res.msg,
          type: 'success'
        })
        this.$parent.getBoatList(1, 15)
        this.$store.commit('hide_edit_ship_generation_dialog')
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    editform (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.editShipgeneration()
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.edit-ship-generation {
  .tishi {
    text-align: center;
    color: red;
    margin-bottom: 10px;
  }
}
</style>
